<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>音悦</title>
    <link rel="stylesheet" href="/dev/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link href="/dev/plugins/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/daohang.css">
    <link rel="stylesheet" href="../css/gedanjiemian.css">
<!--    <link rel="stylesheet" href="../css/playerto.css">-->
<!--    <link rel="stylesheet" href="../css/beijingdongtai.css">-->
    <style>
        #QPlayer{
            z-index:200;
        }
    </style>
</head>
<body>
<div class="stars"></div>
<div id="app"></div>
<div class="nav-bot">
</div>
<div class="playerxiao"></div>
<div id="beijing">
    <div>
        <hr style="color: #f0eeee;">
    </div>
    <ul class="layui-nav" lay-filter="" style="background-color: #ffffff">

        <li class="layui-nav-item">
            <a class="layui-font-cyan" class="hu">热门</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" class="hua active" data-cont="local" >官方推荐</a></dd>
                <dd><a href="javascript:;" class="hua" data-cont="global">热度推荐</a></dd>
            </dl>
        <li class="layui-nav-item">
            <a class="layui-font-cyan" class="hu">主题</a>
            <dl class="layui-nav-child">
                <dd><a class="hua" href="javascript:;" data-cont="qx">清新</a></dd>
                <dd><a class="hua" href="javascript:;" data-cont="dg">动感</a></dd>
                <dd><a class="hua" href="javascript:;" data-cont="jn">静谧</a></dd>
            </dl>
        <li class="layui-nav-item">
            <a class="layui-font-cyan" class="hu">场景</a>
            <dl class="layui-nav-child">
                <dd><a class="hua" href="javascript:;" data-cont="qc">清晨</a></dd>
                <dd><a class="hua" href="javascript:;" data-cont="wh">午后</a></dd>
                <dd><a class="hua" href="javascript:;" data-cont="yw">夜晚</a></dd>
            </dl>
        </li>
    </ul>


    <div>
        <hr class="layui-border-orange">
    </div>
    <!-- 主体页面缩咯图 -->
    <!-- 官方推荐 -->
    <section class="cont" id="local" style="display:block">
    </section>
    <!-- 热度推荐 -->

    <section class="cont" id="global" style="display:none">
    </section>
    <section class="cont" id="qx" style="display:none">
    </section>
    <section class="cont" id="dg" style="display:none">
    </section>
    <section class="cont" id="jn" style="display:none">
    </section>
    <section class="cont" id="qc" style="display:none">
    </section>
    <section class="cont" id="wh" style="display:none">
    </section>
    <section class="cont" id="yw" style="display:none">
    </section>

    <!-- 分页 -->
    <div class="zxf_pagediv"></div>
</div>
<script src="/dev/plugins/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="/dev/plugins/layui/layui.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    $('#myCarousel').carousel({
        interval: 2000
    })
</script>
<script>
    $(function () {
        $("#app").load('/dev/views/slx/nav.html');
    })
</script>
<script>
    $(function (){
        $(".playerxiao").load('/dev/views/cxy/views/cemian.html');
    })

</script>

<!--歌单页面图片-->
<script>

    $(function () {
        console.log("=====");
        $.ajax({
            type: 'get',
            url: "http://localhost:8088/dev/gedan/selet",
            success: function (result) {
                if (result.code == 200) {
                    var arr = result.data
                    console.log(arr)
                    console.log(arr[0].id)

                    loadData(arr)
                }
            }
        })
    })



    //数据的渲染
    function loadData(arr) {
        let str = `<div class="row">`;
        for (let i = 0; i < arr.length; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#local").html(str)
    }
    $(function () {
        console.log("=====");
        $.ajax({
            type: 'get',
            url: "http://localhost:8088/dev/gedan/select",
            success: function (result) {
                if (result.code == 200) {
                    var arr = result.data
                    console.log(arr)
                    console.log(arr[0].id)

                    loadData1(arr)
                    loadData2(arr)
                    loadData3(arr)
                    // loadData4(arr)
                    loadData5(arr)
                    loadData6(arr)
                    loadData7(arr)
                    loadData8(arr)
                }
            }
        })
    })

    function loadData1(arr) {
        let str = `<div class="row">`;
        for (let i = 0; i < 16; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye1.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#global").html(str)
    }
    function loadData2(arr) {
        let str = `<div class="row">`;
        for (let i = 5; i < 21; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye1.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#qx").html(str)
    }
    function loadData3(arr) {
        let str = `<div class="row">`;
        for (let i = 4; i < 20; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye1.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#dg").html(str)
    }
    function loadData5(arr) {
        let str = `<div class="row">`;
        for (let i = 6; i <22; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye1.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#jn").html(str)
    }
    function loadData6(arr) {
        let str = `<div class="row">`;
        for (let i = 10; i < 26; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye1.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#qc").html(str)
    }
    function loadData7(arr) {
        let str = `<div class="row">`;
        for (let i = 17; i < 33; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye1.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#wh").html(str)
    }
    function loadData8(arr) {
        let str = `<div class="row">`;
        for (let i = 15; i < 31; i++) {

            str += `<div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                        alt="通用的占位符缩略图">
                        <div class="caption">
                            <h6 class='text-success text-center'></h6>
                            <p class='text-success text-center'><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye1.html?id=${arr[i].id}">歌单信息:${arr[i].title}</a></p>
                            <p class='text-center text-warning'>作者:${arr[i].massage}</p>
                        </div>
                    </div>
                </div>`
        }
        str += `</div>`

        $("#yw").html(str)
    }
</script>

<!--卡片反转-->
<script>
    var aArr = document.querySelectorAll('.hua');
    // 给每个获取到的元素添加点击事件
    aArr.forEach(function (element) {
        element.addEventListener('click', function () {
            // 移除之前选中的选项卡的激活属性
            var active = document.querySelector(".active");

            active.classList.remove("active");

            // 给当前点击的选项卡添加激活属性
            this.classList.add("active");

            // 获取当前点击选项卡对应的内容卡的id
            var name = this.getAttribute("data-cont");

            // 隐藏所有类名为'cont'的元素
            var cont = document.querySelectorAll(".cont");
            cont.forEach(function (element) {
                element.style.display = "none";
            });

            // 显示当前点击选项卡对应的内容卡
            var section = document.getElementById(name);
            section.style.display = "block";
        });
    });
    // 在页面卸载前保存播放状态


</script>
<!--背景-->
<script>
    $(document).ready(function(){
        var stars=800;  /*星星的密集程度，数字越大越多*/
        var $stars=$(".stars");
        var r=800;   /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
        for(var i=0;i<stars;i++){
            var $star=$("<div/>").addClass("star");
            $stars.append($star);
        }
        $(".star").each(function(){
            var cur=$(this);
            var s=0.2+(Math.random()*1);
            var curR=r+(Math.random()*300);
            cur.css({
                transformOrigin:"0 0 "+curR+"px",
                transform:" translate3d(0,0,-"+curR+"px) rotateY("+(Math.random()*360)+"deg) rotateX("+(Math.random()*-50)+"deg) scale("+s+","+s+")"

            })
        })
    })
</script>
</body>
</html>